<template>
	<view>
		<view class="header_box">
			<scroll-view scroll-x="true" class="scroll-view" @click="clickTopMenu($event)">
				<view class="scroll-view-item" :class="tapIndex == index?'active': ''" v-for="(item,index) in menu"
					:key="index" :id="index">{{item}}</view>
			</scroll-view>
		</view>
		<view class="content_box">
			<view class="news_box" v-for="(item,index) in 10">
				<!-- .native 修饰符会让事件绑定到组件的原生 DOM 元素上，而不是 Vue 组件本身 -->
				<News @click.native="goToDetails" :key="index"></News>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: ['新闻', '娱乐', '体育', '科技', '技术', '属性', '立法', '金色', '淡出'],
				tapIndex: ''
			};
		},
		methods: {
			clickTopMenu(event) {
				this.tapIndex = event.target.id
			},
			
			goToDetails() {
				uni.navigateTo({
					url: '/pages/details/details'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_box {
		position: fixed;
		left: 0;
		top: var(--window-top); // 兼容H5与小程序
		background-color: #f5f7f9;

		/* 隐藏滚动条 */
		.scroll-view {
			width: 750rpx;
			overflow: hidden;
		}

		/* 使用 Webkit 隐藏滚动条 */
		.scroll-view ::-webkit-scrollbar {
			display: none;
		}
	}

	.scroll-view {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;

		.scroll-view-item {
			display: inline-block;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			padding: 0 20rpx;
		}

		.scroll-view-item.active {
			color: #3cc51f;
			// font-weight: bold;
			/* 粗体 */
		}

	}

	.content_box {
		padding-top: 80rpx;

		.news_box {
			padding: 20rpx;
		}
	}
</style>